<template>
  <div class="login flex-c" v-loading="store.state.loadingShow" element-loading-background="rgb(0 0 0 / 0%)">
    <section>
      <div class="input-box">
        <el-input v-model.trim="formObj.phone" clearable placeholder="手机号码" v-on:keyup.enter="clickLogin" />
        <div class="row-line"></div>
        <!-- <el-input v-model.trim="formObj.password" /> -->
        <el-input v-model="formObj.password" show-password type="password" placeholder="密码" v-on:keyup.enter="clickLogin" />
      </div>
      <p class="error-msg">{{ errorMsg }}</p>
      <el-button type="primary" color="#8a95e3" @click="clickLogin">登录</el-button>
    </section>
  </div>
</template>
<script setup>
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { reactive, ref } from 'vue';
import { ElMessage } from "element-plus";

const store = useStore();
const router = useRouter();
const formObj = reactive({
  phone: '',  // 15888889999 123456
  password: '',
})
const errorMsg = ref('');

// 点击登录
function clickLogin() {
  if (formObj.phone === '' || formObj.phone === null) {
    errorMsg.value = '账号不能为空'
    return;
  }
  if (formObj.password === '' || formObj.password === null) {
    errorMsg.value = '密码不能为空'
    return;
  }
  errorMsg.value = '';

  login(formObj).then(res => {
    console.log(res);
    if (res.code == 200) {
      ElMessage({ message: '登录成功', type: 'success' })
      store.state.user = res.data;
      localStorage.setItem('user', JSON.stringify(store.state.user));

      store
        .dispatch("getMenuList")
        .then((res) => {
          if (res == 1) {
            let allRoute = store.state.allRoute;
            console.log('allRoute[0]', allRoute[0])
            if (allRoute.length) {
              router.replace(allRoute[0])
            } else {
              router.replace('/error404')
            }
          } else {
            router.replace('/error404')
          }
        })
        .catch((res) => {
          console.warn(res);
        });

    } else {
      ElMessage({ message: res.msg || '请求数据失败', type: 'warning' })
    }
  })
}

</script>
<style lang="scss" scoped>
.login {
  height: 100%;
  width: 100%;
  background-image: url('@/assets/img/bg-login.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 80%;

  section {
    width: 360px;
    margin-bottom: 10%;

    .el-button {
      width: 100%;
      color: #fff;
      height: 48px;
      letter-spacing: 6px;

      :deep(span) {
        padding-left: 6px;
      }
    }
  }

  .input-box {
    background-color: #fff;
    border: 6px solid #e9e8e8;
    padding: 16px;
    border-radius: 16px;
  }

  .el-input {
    :deep(.el-input__wrapper) {
      border: unset;
      box-shadow: unset;
    }

    :deep(.el-input__inner) {
      height: 40px;
    }
  }

  .row-line {
    width: 100%;
    height: 1px;
    background-color: #cccbcb;
    margin-bottom: 3px;
  }

  .error-msg {
    margin: 14px 0px;
    color: red;
    font-size: 13px;
    padding-left: 6px;
    min-height: 15px;
  }
}</style>